* {
    margin: 0;
    padding: 0;
}

body {
    min-width: 600px;
}

#content {
    padding: 0 200px;
    overflow: hidden;
}

#header,
#footer {
    height: 100px;
    text-align: center;
    border: 1px solid rgb(45, 234, 240);
    background: gray;
    text-align: center;
}

#content .middl,
#content .left,
#content .right {
    padding-bottom: 10000px;
    margin-bottom: -10000px;
    height: 700px;
    text-align: center;
}

#content .middle {
    float: left;
    width: 100%;
    background: rgb(140, 193, 243);
    height: 700px;
    text-align: center;
    /*padding: 0 200px;*/
}

#content .left {
    position: relative;
    left: -200px;
    margin-left: -100%;
    float: left;
    width: 200px;
    background: rgb(214, 139, 229);
}

#content .right {
    position: relative;
    right: -200px;
    margin-left: -200px;
    float: left;
    width: 200px;
    background: rgb(146, 231, 110);
}



.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}